<template>
  <div>
    <div>
      <van-nav-bar
        title
        left-text="返回"
        right-text="注册"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <h2 class="log">用户登录</h2>
      <div id="inner">
        <van-cell-group style="padding:0 15%;">
          <van-field
            v-model="username"
            border
            label="用户名"
            right-icon="question-o"
            placeholder="请输入用户名"
            @click-right-icon="$toast('请输入用户名')"
            style="margin-bottom:15%;height:0.8rem;line-height:0.8rem"
          />
          <van-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            style="height:0.8rem;line-height:0.8rem"
          />
        </van-cell-group>
        <div style="display:flex;padding:0 10%;margin-top:15%; justify-content: space-between">
          <van-checkbox v-model="checked" @blur="blur()">记住密码</van-checkbox>
          <router-link to="/find" style="color:black">找回密码</router-link>
        </div>
      </div>
    </div>
    <van-button type="primary" style="width:40%;margin: 10% 30%;" @click="tab()" class="btn">登录</van-button>
    <hr />
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  name: "log",
  data() {
    return {
      username: "",
      password: "",
      checked: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/reg");
    },
    tab() {
      if (this.username == "" || this.password == "") {
        console.log(111);
        alert("账号或密码不能为空");
      } else {
        axios({
          method:'post',
          url: "http://47.102.221.184:8083/secluxury/user/login",
          params: {
            email: this.username,
            password: this.password
          }
        }).then(data => {
          console.log(data.data);
          if (data.data == 1) {
            var arr = [];
            if (this.checked == true) {
              arr.push(this.username);
              arr.push(this.password);
              localStorage.setItem("token", JSON.stringify(arr));
            } else if (this.checked == "") {
              arr.push(this.username);
              localStorage.setItem("token", JSON.stringify(arr));
            }

            this.$router.push("/index");
          }
        });
      }
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
.log {
  width: 40%;
  font-weight: normal;
  margin: 10% 30%;
  text-align: center;
}
.btn {
  margin-top: 10% auto;
}
</style>
